<template>
  <div class="meal">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0,'')">
          添加套餐
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-form
          ref="form"
          size="mini"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input v-model="organ.name" placeholder="套餐名称" />
          </el-form-item>
          <el-form-item>
            <el-button

              icon="el-icon-search"
              type="primary"
              native-type="button"
              @click="search"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>

    </vab-query-form>
    <el-table
      ref="tableData"
      v-loading="listLoading"
      :data="tableData"


    >
      <el-table-column
        show-overflow-tooltip
        label="套餐名称"
        prop="name"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="套餐日费用"
        prop="dailyFee"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="套餐月费用"
        prop="monthFee"
      ></el-table-column>


      <el-table-column label="禁用状态" prop="disabled">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.disabled"
            class="demo"
            active-color="#F04134"
            active-text="禁用"
            font-size="12px"
            inactive-color="#11CED2"
            inactive-text="启用"
            @change="switchChange(scope.$index, scope.row)"

          />
        </template>




      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="180px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text"    @click="handleAdd(scope.row.id,scope.row)" >修改 <i class="el-icon-edit"></i></el-button>
          <el-button type="text" @click="handleInfo(scope.row.id,scope.row)" >详情 <i class="el-icon-tickets"></i></el-button>
          <el-button type="text"   @click="doDelete(scope.$index, scope.row)">删除 <i class="el-icon-delete"></i></el-button>

        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      :background="background"


      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-dialog :title="title" :visible.sync="outerVisible"    v-loading="listLoadings"   :close-on-click-modal="false" destroy-on-close width="1000px" >
<!--      <el-dialog-->
<!--        width="30%"-->
<!--        :title="titles"-->
<!--        :visible.sync="innerVisible"-->


<!--      >-->

<!--        <el-form ref="list"    :model="list"    label="top">-->
<!--          <el-form-item label="套餐项目名称" prop="dailyNumberOfCare">-->
<!--            <el-select-->
<!--              @change="change"-->
<!--              v-model="value"-->
<!--              filterable-->
<!--              remote-->
<!--              reserve-keyword-->
<!--              placeholder="请输入助记码或套餐名称"-->
<!--              :remote-method="remoteMethod"-->
<!--              :loading="loading">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.mark"-->
<!--                :label="item.name"-->
<!--                :value="item.mark">-->
<!--              </el-option>-->
<!--            </el-select>-->

<!--          </el-form-item>-->

<!--          <el-form-item label="日护理次数" >-->
<!--            <el-input v-model="list.dailyNumberOfCare"    type="number" min="0" ></el-input>-->


<!--          </el-form-item>-->

<!--          <el-form-item label="月护理次数"  >-->
<!--            <el-input v-model="list.monthNumberOfCare"  type="number" min="0"></el-input>-->

<!--          </el-form-item>-->
<!--          <el-form-item label="总护理次数" >-->
<!--            <el-input v-model="list.totalNumberOfCare"  type="number" min="0"></el-input>-->
<!--          </el-form-item>-->



<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button @click="innerVisible = false">取 消</el-button>-->
<!--          <el-button type="primary" @click="save">保存</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->

      <el-form ref="form"    :rules="rules" :model="form"  :inline="true">
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="form.name"     min="0"></el-input>


        </el-form-item>

        <el-form-item label="套餐日费用"  prop="dailyFee" >
          <el-input v-model="form.dailyFee"    type="number" min="0"></el-input>

        </el-form-item>
        <el-form-item label="套餐月费用" prop="monthFee">
          <el-input v-model="form.monthFee"  type="number" min="0"></el-input>
        </el-form-item>



      </el-form>

<!--      <el-button type="success" @click="AddListRow()" round >添加项目套餐</el-button>-->
      <div class="mainBottom" >

        <prescription v-if="outerVisible" v-model="form.items" :config="config" ref="items"></prescription>
      </div>

      <!--      <el-button style="float: right; padding: 3px 0" type="text"   @click="addinner">{{titles}}</el-button>-->
<!--      <el-table-->
<!--        ref="tableSort"-->

<!--        :data="datas=form.items"-->


<!--      >-->

<!--                  <el-table-column-->
<!--                    width="250px"-->
<!--                    show-overflow-tooltip-->
<!--                    label="套餐项目名称"-->

<!--                  >-->
<!--                    <template slot-scope="scope">-->

<!--                      <el-select-->
      <!--                        v-if="!scope.row.itemName"-->

<!--                        @change="change"-->
<!--                        v-model="scope.row.itemMark"-->
<!--                        filterable-->
<!--                        remote-->
<!--                        reserve-keyword-->
<!--                        placeholder="请输入助记码或套餐名称"-->
<!--                        :remote-method="remoteMethod"-->
<!--                        :loading="loading">-->
<!--                        <el-option-->
<!--                          v-for="item in options"-->
<!--                          :key="item.mark"-->
<!--                          :label="item.name"-->
<!--                          :value="item.mark">-->
<!--                        </el-option>-->
<!--                      </el-select >-->
<!--                      <span v-if="scope.row.itemName">{{scope.row.itemName}}</span>-->
<!--                    </template>-->

<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    width="150px"-->
<!--                    show-overflow-tooltip-->
<!--                    label="日护理次数"-->


<!--                  >-->
<!--                      <template slot-scope="scope">-->

<!--                                  <el-input v-model="scope.row.dailyNumberOfCare" type="number" min="0">-->

<!--                                  </el-input>-->

<!--                                </template>-->



<!--                                        </el-table-column>-->

<!--                                        <el-table-column-->
<!--                                          width="150px"-->
<!--                                          show-overflow-tooltip-->
<!--                                          label="月护理次数"-->
<!--                                        >-->
<!--                                          <template slot-scope="scope">-->

<!--                                            <el-input v-model="scope.row.monthNumberOfCare" type="number" min="0">-->

<!--                                            </el-input>-->

<!--                                          </template>-->


<!--                                        </el-table-column>-->
<!--                                        <el-table-column-->
<!--                                          width="150px"-->
<!--                                          show-overflow-tooltip-->
<!--                                          label="总护理次数"-->

<!--                                        >-->

<!--                                          <template slot-scope="scope">-->

<!--                                            <el-input v-model="scope.row.totalNumberOfCare" type="number" min="0">-->

<!--                                            </el-input>-->

<!--                                          </template>-->

<!--                                        </el-table-column>-->

<!--                                        <el-table-column-->
<!--                                          show-overflow-tooltip-->
<!--                                          label="操作"-->
<!--                                          width="180px"-->
<!--                                          fixed="right"-->
<!--                                        >-->
<!--                                          <template slot-scope="scope">-->

<!--                                            <el-button type="text"   @click="handleDelete(scope.$index, scope.row)">删除 <i class="el-icon-delete"></i></el-button>-->

<!--                                          </template>-->
<!--                                        </el-table-column>-->
<!--                                      </el-table>-->
                                      <div slot="footer" class="dialog-footer">
                                        <el-button @click="outerVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="Saveadd" v-preventReClick>确定</el-button>
                                      </div>
                                    </el-dialog>


                                    <mealInfo ref="mealInfo"></mealInfo>

                                  </div>
                                </template>

                                <script>
                                    import mealInfo from "./mealInfo/mealInfo";
                                    import { search } from "@/api/meal";
                                    import { searchmnemonicCodeOrName } from "@/api/meal";
                                    import { replace } from "@/api/meal";
                                    import { add } from "@/api/meal";
                                    import { disable } from "@/api/meal";
                                    import { endisable } from "@/api/meal";
                                    import { doDelete } from "@/api/meal";
                                    import { searchmeal } from "@/api/meal";
                                    import prescription from './components/prescription'
                                    export default {
                                        name: "Meal",
                                        components: {mealInfo, prescription,},
                                        data() {
                                            return {
                                                config: {
                                                    column: [
                                                        { label: '项目名称', type: 'searchInput', key: 'itemMark',name:"itemName" },
                                                        // { label: '日护理次数', type: 'number', key: 'dailyNumberOfCare' },
                                                        // { label: '月护理次数', type: 'number', key: 'monthNumberOfCare' },
                                                        // { label: '总护理次数', type: 'number', key: 'totalNumberOfCare' },

                                                    ],
                                                    data: {
                                                        itemMark:"",
                                                        dailyNumberOfCare: undefined,
                                                        monthNumberOfCare: undefined,
                                                        totalNumberOfCare: undefined,


                                                    }
                                                },

                                                organ:{
                                                  name:"",
                                                },
                                                listLoadings:false,
                                                listLoading:true,
                                                outerVisible: false,
                                                innerVisible: false,
                                                isdisabled:false,
                                                title:"",
                                                total:0,
                                                isshow:false,
                                                id:0,
                                                background:true,
                                                methodsType:"put",
                                                titles:"",
                                                queryForm: {
                                                    currPageNo: 1,
                                                    limit: 8,
                                                    name:"",
                                                   institutionNumber:"",


                                                },
                                                states: [],
                                                options: [

                                                ],
                                                lists: [

                                                ],
                                                loading: false,
                                                value: '',
                                                tableData:[

                                                ],
                                                list:
                                                    {   dailyNumberOfCare:'',
                                                        monthNumberOfCare:"",
                                                        totalNumberOfCare:"",
                                                        itemMark:"",
                                                        itemName:"",
                                                    }
                                                ,
                                                form:{
                                                    name:"",
                                                    monthFee:"",
                                                    dailyFee:"",
                                                    items:[

                                                    ]
                                                },
                                                rules:{
                                                    name: [{ required: true, trigger: "blur", message: "套餐名称" ,type:'string'}],
                                                    dailyFee:[{ required: true, message: "日费用", trigger: "blur",}],
                                                    monthFee:[{ required: true, message: "月费用",trigger: "blur",}],


                                                },
                                            }
                                        },
                                        created(){

                                            this.lists = this.states.map(item => {
                                                return { value: `${item}`, label: `${item}` };
                                            });
                                          this.search()
                                        },
                                        methods:{
                                            AddListRow() {

                                                this.isshow=false
                                                this.form.items.push({
                                                    "dailyNumberOfCare":"",
                                                    "monthNumberOfCare":"",
                                                    "totalNumberOfCare":"",
                                                    "itemMark":"",
                                                    "itemName":'',

                                                });




                                            },

                                            // remoteMethod(query) {
                                            //     if (query !== '') {
                                            //         this.loading = true;
                                            //         let mnemonicCodeOrName=query
                                            //         searchmnemonicCodeOrName({mnemonicCodeOrName}).then(res => {
                                            //             console.log(res.data)
                                            //                  this.options=res.data
                                            //
                                            //             setTimeout(() => {
                                            //                 this.loading = false;
                                            //             }, 500);
                                            //         })
                                            //
                                            //     } else {
                                            //         this.options = [];
                                            //     }
                                            // },
                                            handleAdd(id,data) {


                                                this.id = id
                                                console.log(id)

                                                if(id>0){
                                                    this.isshow=true
                                                    // this.listLoadings=true
                                                       console.log(data)
                                                    this.title="修改套餐";
                                                    this.titles = "添加项目套餐";
                                                    this.isdisabled = true
                                                    this.methodsType = 'put'
                                                    console.log( data.mark)
                                                    let  mark=data.mark
                                                    this.form={...data}
                                                    this.form.items=data.packageItems
                                                    console.log(this.form.items)


                                                    this.outerVisible=true

                                                    this.$nextTick(function () {


                                                        this.$refs.items.parentHandleclick(this.form.items)
                                                    })
                                                    // searchmeal({mark}).then(res => {
                                                    //
                                                    //     this.form={...res.data}
                                                    //
                                                    //     this.form.items=res.data.packageItems
                                                    //
                                                    //     console.log(this.form.items)
                                                    //
                                                    //     this.outerVisible=true
                                                    //     this.$nextTick(function () {
                                                    //         this.$refs.items.parentHandleclick(this.form.items)
                                                    //     })
                                                    //
                                                    //   setTimeout(() => {
                                                    //     this.listLoadings = false;
                                                    //   }, 500);
                                                    // })

                                                }else {
                                                    this.outerVisible=true
                                                    this.$nextTick(function () {
                                                        let row=this.config.data
                                                        console.log(row)
                                                        this.form={
                                                            name:"",
                                                            monthFee:"",
                                                            dailyFee:"",
                                                            items:[




                                                            ]
                                                        }
                                                        this.$refs.items.parentHandleclick([])

                                                        // this.$refs.items.parentHandleclick(
                                                        //     [
                                                        //
                                                        //
                                                        //     ]
                                                        // )

                                                    })



                                                    this.isshow=false
                                                    this.title = "添加套餐";
                                                    this.titles = "添加项目套餐";
                                                    this.methodsType = 'post'
                                                    this.isdisabled = false



                                                }


                                            },
                                            handleInfo(index,row) {

                                                this.$refs["mealInfo"].showEdit(row);
                                            },
                                            handleDelete(index){ //删除行数
                                                console.log(index)
                                                this.form.items.splice(index, 1)
                                            },
                                            addinner(id,row){

                                                this.innerVisible=true
                                                 this.value=""
                                                this.list.dailyNumberOfCare=""
                                                this.list.monthNumberOfCare=""
                                                this.list.totalNumberOfCare=""

                                            },
                                            change(data){



                                              // this.list.itemMark=data

                                                let obj = {};
                                                obj = this.options.find((item)=>{

                                                    return item.mark === data;
                                                });
                                                let getName = ''
                                                getName = obj.name;
                                                console.log(getName)

                                                for(let i=0;i<this.form.items.length;i++){
                                                        if(this.form.items[i].itemName){
                                                        }else {
                                                        this.isshow=false
                                                                 console.log(this.form.items[i].itemMark)
                                                        this.form.items[i].itemName=getName
                                                            return false

                                                    }

                                                }




                                            },

                                            save(){

                                                //     if(this.value==""){
                                                //         this.$message({
                                                //             message: '请选择套餐项目',
                                                //             type: 'warning'
                                                //         });
                                                //     }else {
                                                //
                                                //
                                                //
                                                //         this.form.items.push(this.list)
                                                //         this.innerVisible=false
                                                //         console.log(this.form.items)
                                                //
                                                //     }
                                                //
                                                //
                                                //    this.list={
                                                //     dailyNumberOfCare:"",
                                                //     name:"",
                                                //     monthNumberOfCare:"",
                                                //     totalNumberOfCare:"",
                                                // }
                                            },
                                            Saveadd(){

                                                var obj = {};
                                                for(var i= 0, l = this.form.items.length; i< l; i++){
                                                    var item = this.form.items[i].itemMark;
                                                    obj[item] = (obj[item] +1 ) || 1;
                                                }
                                                console.log(obj[item])
                                                if(obj[item]>=2){
                                                    this.$message({
                                                        message: '不能添加重复的套餐',
                                                        type: 'warning'
                                                    });

                                                }else {
                                                    this.$refs['form'].validate(async (valid) => {
                                                        if (valid) {
                                                            if(this.id>0){

                                                                replace(this.form).then(res =>{
                                                                    console.log(res)

                                                                    if(res.code==200){
                                                                        this.$baseMessage("修改成功",'success');
                                                                        this.outerVisible=false
                                                                        this.search()
                                                                    }else {

                                                                    }
                                                                    setTimeout(() => {
                                                                        this.listLoading = false;
                                                                    }, 500);
                                                                })
                                                            }else{

                                                                console.log(this.form)
                                                                add( this.form).then(res =>{
                                                                    console.log(res)

                                                                    if(res.code==200){
                                                                        this.$baseMessage("添加成功",'success');
                                                                        this.outerVisible=false
                                                                        this.search()
                                                                    }else {

                                                                    }
                                                                    setTimeout(() => {
                                                                        this.listLoading = false;
                                                                    }, 500);
                                                                })

                                                            }




                                                        } else {
                                                            return false;
                                                        }
                                                    });
                                                }

                                            },
                                            switchChange(index,row){

                                                 let mark  =row.mark


                                                if(row.disabled==true){

                                                    disable({mark}).then(res => {

                                                        console.log(res)
                                                        if(res.code==200){

                                                            this.$baseMessage("已禁用",'success');

                                                        }else {

                                                        }


                                                    })


                                                }else {
                                                    endisable({mark}).then(res => {

                                                        console.log(res)
                                                        if(res.code==200){

                                                            this.$baseMessage("已启用",'success');

                                                        }else {

                                                        }


                                                    })

                                                }
                                                setTimeout(() => {
                                                    this.listLoading = false;
                                                }, 500);

                                            },
                                            search(){
                                                this.listLoading = true
                                                this.queryForm.institutionNumber=localStorage.getItem("institutionNumber")
                                                 this.queryForm.name=this.organ.name
                                                search(this.queryForm).then(res =>{
                                                     this.tableData=res.data.data
                                                    this.total=res.data.total
                                                    setTimeout(() => {
                                                        this.listLoading = false;
                                                    }, 500);
                                                })
                                                this.queryForm.currPageNo=1
                                            },
                                            doDelete(index,row) {
                                              let mark=row.mark
                                                console.log(row)
                                                if (row.id) {
                                                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                                                        const {code, msg } = await doDelete(({mark}));
                                                          if(code==200){
                                                              this.$baseMessage("删除成功",'success');
                                                              this.search()
                                                          }else {
                                                              this.$baseMessage("删除失败");
                                                          }
                                                    });
                                                }
                                            },
                                            handleSizeChange(val) {
                                                this.queryForm.limit = val;
                                                this.search();
                                            },
                                            handleCurrentChange(val) {
                                                this.queryForm.currPageNo = val;
                                                this.search();
                                            },

                                        }
                                    }
                                </script>


                                <style scoped>
                                    .meal >>> .demo .el-switch__label {
                                        position: absolute !important;
                                        display: none !important;
                                        color: #fff !important;
                                    }
                                    /*打开时文字位置设置*/
                                    .meal >>> .demo .el-switch__label--right {
                                        z-index: 1 !important;

                                    }
                                    .meal >>>.el-switch__core{
                                      width: 50px !important;
                                    }
                                    .meal >>> .demo .el-switch__label.is-active span{
                                      font-size: 12px !important;
                                    }
                                    /*关闭时文字位置设置*/
                                    .meal >>> .demo .el-switch__label--left {
                                        z-index: 1 !important;
                                        left: 19px !important;
                                      margin-right: 0px !important;
                                    }
                                    /*显示文字*/
                                    .meal >>> .demo .el-switch__label.is-active {
                                        display: block !important;
                                    }
                                    .meal >>> .demo.el-switch .el-switch__core,
                                    .el-switch .el-switch__label {
                                            width: 50px !important !important;
                                        }
                                </style>
